<template>
  <div class="order">
    <div class="header1 colorWhite">
      <div @click="goBack">
        <!-- <router-link to="/orderOne"> -->
        <a-icon type="left"
                class="icon colorWhite" />
        <a class="h3 colorWhite">确认支付</a>
        <!-- </router-link> -->
      </div>
    </div>
    <div>
      <scanlife :erweima="erweima"></scanlife>
      <detail :personOrderList="personOrderList"></detail>
    </div>
    <div v-if="show"
         class="add-pop-up">
      <div class="shade"></div>
      <div class="delStation">还未付款，确定要退出吗?</div>
      <div class="btn">
        <button class="cancel"
                @click="quit">取消</button>
        <button class="confirm"
                @click="confirmAdd">确定</button>

      </div>
    </div>
    <div class="paySuccsee"
         v-if="paySusFlay">
      <div class="f-mask"></div>
      <p>支付成功</p>
    </div>
  </div>
</template>

<script>
import scanlife from './scanlife'
import detail from './detail'
import urls from '../../../common.js'
// import { Toast } from 'mint-ui'
export default {
  name: 'header1',
  data () {
    return {
      personOrderList: this.$route.params.key.data.goodOrders,
      erweima: this.$route.params.key.data,
      orderId: '',
      timer: '',
      show: false,
      currentTime: '',
      paySusFlay: false
    }
  },
  components: {
    scanlife,
    detail
  },
  created () {
    this.timer = window.setInterval(() => {
      setTimeout(this.getOrderStatus(), 0)
    }, 1500)
    // this.clearSettime = setInterval(() => {
    // this.toOrderFive()
    // }, 30000)
  },
  destroyed () {
    clearInterval(this.timer)
  },
  methods: {
    // dateTimes () { // 调用main.js的时间
    //   let date = this.toLocaleString()
    //   date.then(function (datas) {
    //     let data = new Date(datas.body)
    //     this.dateObj.hours = this.addZero(data.getHours())
    //     this.dateObj.minutes = this.addZero(data.getMinutes())
    //     this.currentTime = this.dateObj.hours + ':' + this.dateObj.minutes
    //   })
    // },
    toOrderFive () {
      // this.dateTimes()
      let date = this.toLocaleString()
      date.then(function (datas) {
        let data = new Date(datas.body)
        let hour = this.addZero(data.getHours())
        let minutes = this.addZero(data.getMinutes())
        let currentTime = hour + ':' + minutes
        if (currentTime >= '07:30' && currentTime <= '08:40') {
          // this.$router.push('/orderOne')
        } else if (currentTime >= '11:00' && currentTime <= '13:30') {
          // this.$router.push('/orderOne')
        } else if (currentTime >= '17:30' && currentTime <= '19:00') {
          // this.$router.push('/orderOne')
        } else {
          this.$router.push('/orderOne')
          // clearInterval(this.clearSettime)
        }
      })
    },
    confirmAdd () {
      // 确定退出
      this.$store.commit('updataToCar') // 清空数组
      this.$router.push('/orderOne') // 跳转点餐首页
      // clearInterval(this.clearSettime)
    },
    quit () {
      this.show = false
    },
    goBack () {
      // this.$store.commit('updataToCar') // 返回上一页更新清空数组
      this.orderID = this.$route.params.key.data.goodOrders.order_serial_number
      this.$http.get(urls.getOrderStatus + '/' + this.orderID).then(result => {
        // console.log(result)
        if (result.body.code === '200') {
          if (result.body.data.status === 0) {
            this.show = true
            this.$store.commit('updataToCar') // 清空数组
            window.clearInterval(this.timer) // 清空定时器
            // clearInterval(this.clearSettime)
          } else {
            this.show = false
            this.$store.commit('updataToCar') // 清空数组
            window.clearInterval(this.timer) // 清空定时器
            // clearInterval(this.clearSettime)
          }
        }
      })
    },
    getOrderStatus () {
      this.orderID = this.$route.params.key.data.goodOrders.order_serial_number
      this.$http.get(urls.getOrderStatus + '/' + this.orderID).then(result => {
        console.log(result)
        if (result.body.code === '200') {
          if (result.body.data.status === 1) {
            // Toast({
            //   message: '支付成功',
            //   position: 'middle',
            //   duration: 2000
            // })
            this.paySusFlay = true
            setTimeout(() => {
              this.paySusFlay = false
              this.$router.push('/orderOne') // 跳转点餐首页
            }, 3000)
            window.clearInterval(this.timer) // 清空定时器
            this.$store.commit('updataToCar') // 清空数组
            // clearInterval(this.clearSettime)
            // setTimeout(function () {
            // }, 2000)
          }
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../../../static/css/color.styl'
.f-mask
  position fixed
  top 0
  right 0
  bottom 0
  left 0
  background rgba(255, 255, 255, 0)
.paySuccsee
  width 3rem
  height 1.2rem
  background rgba(0, 0, 0, 0.5)
  position absolute
  top 50%
  left 50%
  margin -0.6rem 0 0 -1.5rem
  z-index 10
  border-radius 0.05rem
  p
    text-align center
    color #fff
    line-height 1.2rem
.order
  position relative
  background-color $color-bgc
  height 100%
  width 100%
.header1
  height 0.98rem
  background-color $color-main
  text-align justify
  line-height 0.98rem
  padding-left 0.3rem
  color $color-white
  margin-bottom 0.3rem
  .colorWhite
    color $color-white
  .icon
    font-size 0.36rem
    vertical-align -0.06rem
  .h3
    display inline-block
    font-size 0.36rem
.anticon
  font-size 0.26rem
  vertical-align -0.23em
.add-pop-up
  position absolute
  left 50%
  top 10%
  width 460px
  height 200px
  // background-color: #fff;
  margin 230px -140px
  border 1px solid #f5f5f5
  border-radius 3px
  cursor pointer
  .shade // 弹出层
    position fixed // transform 属性会影响fixed相对位置
    z-index 1
    width 100%
    height 100%
    left 0
    top 0
    background-color #595959
    opacity 0.5
  .delStation
    background-color #fff
    position relative
    z-index 2
    height 90px
    line-height 90px
    padding 0 45px
    border-top-left-radius 0.2rem
    border-top-right-radius 0.2rem
  .btn
    position relative
    text-align center
    padding 0px 0 30px 0
    z-index 2
    padding-top 40px
    background-color #fff
    border-bottom-left-radius 0.2rem
    border-bottom-right-radius 0.2rem
    button
      display inline-block
      width 1.2rem
      height 0.5rem
      text-align center
      font-size 0.24rem
      color #27ae9e
      background #fff
      border 1px solid #27ae9e
      border-radius 0.05rem
      margin-left 0.2rem
    .confirm
      background-color #27ae9e
      margin-right 16px
      color #fff
    .cancel
      background-color #fff
      border 1px solid #27ae9e
      color #3fb4a5
</style>
